<template>
  <div class="rightBodyContent">
    <div class="rightBodyContent-in">
      <el-button type="primary" plain @click="backlist" size="small"><i class="el-icon-back"></i>返回列表
      </el-button>
      <div style="padding:60px 0;">
        <el-form :model="editForm" label-width="100px" :rules="editFormRules" ref="editForm">
          <el-row>
            <el-col :span="16">
              <el-form-item label="物料名称" prop="name">
                <el-input v-model="editForm.name" auto-complete="off" placeholder="填写物料名称"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8"></el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="报警库存" prop="warming">
                <el-input v-model="editForm.warming" auto-complete="off" placeholder="填写报警库存"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="单位" prop="unit">
                <el-input v-model="editForm.unit" auto-complete="off" placeholder="填写物料单位"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8"></el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="仓库" prop="phone">
                <el-input v-model="editForm.phone" auto-complete="off" placeholder="填写仓库"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8" v-show="!detailId.id">
              <el-form-item label="数量" prop="number">
                <el-input v-model="editForm.number" auto-complete="off" placeholder="填写物料库存"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8"></el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="">
                <el-button @click.native="resetForm" size="small">取消</el-button>
                <el-button type="primary" @click.native="editSubmit" size="small">提交</el-button>
              </el-form-item>
            </el-col>
            <el-col :span="8">
            </el-col>
            <el-col :span="8"></el-col>
          </el-row>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
  import api from '@/utils/api.js'

  export default {
    data () {
      return {
        tableList: [],
        sonselectList: null,
        first_id: '',
        son_id: '',
        editForm: {
          unit: '',
          name: '',
          number: '',
          phone: '',
          status: '1',
          warming: ''
        }, // 编辑界面数据
        editFormRules: {
          name: [
            {required: true, message: '请填写物料名称', trigger: 'blur'}
          ],
          warming: [
            {required: true, message: '请填写警报库存', trigger: 'blur'}
          ],
          unit: [
            {required: true, message: '请填写物料单位', trigger: 'change'}
          ]
        }, // 表单验证不能为空规则
        detailId: this.$route.query
      }
    },
    created () {
      if (this.detailId.id) {
        this.InitFn()
      }
    },
    methods: {
      // 初始化
      InitFn () {
        this.$fetch(api.admin_materiel_edit, {
          id: this.detailId.id
        }).then((response) => {
          if (response.code === 0) {
            this.editForm.unit = response.vo.unit
            this.editForm.name = response.vo.name
            this.editForm.phone = response.vo.phone
            this.editForm.status = response.vo.status
            this.editForm.warming = response.vo.warming
            this.editForm.number = response.vo.number
          } else {
          }
        }).catch((err) => {
          console.log(err)
        })
      },
      changeSearchSelectFn (option) {
        // option 1 顶级分类 2 二级分类
        if (option === 1) {
          this.son_id = ''
          this.sonselectList = this.tableList[this.first_id].child
          if (JSON.stringify(this.sonselectList) === '{}') {
            this.sonselectList = null
          }
          this.editForm.book_cat_id = this.first_id
        } else if (option === 2) {
          this.editForm.book_cat_id = this.son_id
        }
      },
      // 提交数据
      editSubmit () {
        // 验证信息
        let _self = this
        this.$refs['editForm'].validate((valid) => {
          if (valid) {
            console.log('提交信息')
            _self.submitBook()
            console.log('提交数据data', _self.editForm)
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
      // 提交新增，编辑书籍
      submitBook () {
        // 判断新增 编辑
        let _self = this
        let url_ = api.admin_materiel_add
        let message = '添加成功'
        if (this.detailId.id) {
          url_ = api.admin_materiel_edit
          this.editForm.id = this.detailId.id
          message = '编辑成功'
        }
        this.$post(url_, this.editForm).then((response) => {
          console.log(response)
          if (response.code === 0) {
            _self.$message({
              message: message,
              type: 'success'
            })
            if (!this.detailId.id) {
              _self.$refs['editForm'].resetFields()
            }
          } else {
            console.log('请求失败')
          }
        }).catch((err) => {
          console.log(err)
        })
      },
      resetForm () {

      },
      // 关闭弹窗之前执行
      handleClose () {
        this.dialogVisible = false
      },
      backlist () {
        this.$router.go(-1)
      }
    },
    mounted () {
    }
  }
</script>

